<template>
  <BasicDialog ref="basicDialog" :isVisible="isAlert" :isShowSure="flag != 'menu_look'" width="50%" :title="title"
    @handleSure="handleSure">
    <template #content>
      <el-form ref="formRef" :model="formInfo" :rules="flag != 'menu_look' ? rules : {}" label-width="120px">
        <el-form-item label="父级菜单：">
          {{ parentData.mname ? parentData.mname : '一级菜单' }}
        </el-form-item>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="菜单名称：" prop="mname">
              <el-input v-if="flag != 'menu_look'" type="text" v-model.trim="formInfo.mname" placeholder="菜单名称"
                :maxlength="32" clearable></el-input>
              <span v-else>{{ formInfo.mname }}</span>
            </el-form-item>
            <el-form-item label="菜单类型：" prop="type">
              <el-select v-if="flag != 'menu_look'" v-model="formInfo.type" placeholder="参数类型" clearable
                style="width: 100%">
                <el-option v-for="op in menuTypes" :key="op.value" :value="op.value" :label="op.label" />
              </el-select>
              <span v-else>{{ menuTypeEnum[formInfo.type] }}</span>
            </el-form-item>
            <el-form-item label="路由：" prop="mkey" v-if="formInfo.type ===1 || formInfo.type ===2">
              <el-input v-if="flag != 'menu_look'" type="text" v-model.trim="formInfo.mkey" placeholder="路由"
                :maxlength="50" clearable></el-input>
              <span v-else>{{ formInfo.mkey }}</span>
            </el-form-item>
            <el-form-item label="权限标识：" prop="permission" v-if="formInfo.type ===2 || formInfo.type ===3">
              <el-input v-if="flag != 'menu_look'" type="text" v-model.trim="formInfo.permission" placeholder="权限标识"
                :maxlength="50" clearable></el-input>
              <span v-else>{{ formInfo.permission }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图标：" prop="icon">
              <div style="padding-right:20px">
                <i v-if="formInfo.icon" :class="['logo_img', 'iconfont', formInfo.icon]"></i>
              </div>
              <el-input v-if="flag != 'menu_look'" type="text" v-model.trim="formInfo.icon" placeholder="图标"
                :maxlength="50" clearable></el-input>
              <span v-else>{{ formInfo.icon }}</span>
            </el-form-item>
            <el-form-item label="状态：" prop="state">
              <el-select v-if="flag != 'menu_look'" v-model="formInfo.state" placeholder="状态" clearable
                style="width: 100%">
                <el-option v-for="op in menuState" :key="op.value" :value="op.value" :label="op.label" />
              </el-select>
              <span v-else>{{ menuStateEnum[formInfo.state] }}</span>
            </el-form-item>
            <el-form-item label="排序：" prop="sort">
              <el-input v-if="flag != 'menu_look'" type="text" v-model.number="formInfo.sort" placeholder="排序"
                :maxlength="8" clearable></el-input>
              <span v-else>{{ formInfo.sort }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </BasicDialog>
</template>
<script lang='ts' setup>
import { FormInfo } from "@components/common/BasicForm/BasicFormTypes";
import type { FormRules, FormInstance } from 'element-plus';
import { menuTypes, menuState, } from "@/utils/staticData"
import { actiontreeAdd, actiontreeEdit, getActionTreeById } from "@/request/apis/system/menu"
import { menuTypeEnum, menuStateEnum } from "@/utils/staticData";
const props = defineProps({
  info: {
    type: Object,
    default: () => {
      return {}
    }
  },
  flag: {
    type: String,
    default: ''
  },
  isAlert: {
    type: Boolean,
    default: false
  },
  parentData: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const $emits = defineEmits([
  "closeDialog"
])


//表单数据 
let formInfo = ref<FormInfo>({});
// 表单校验规则
const rules = reactive<FormRules>({
  mname: [{ required: true, message: "不能为空", trigger: "blur" }],
  type: [{ required: true, message: "不能为空", trigger: "change" }],
  mkey: [
    { required: true, message: "不能为空", trigger: "blur" },
    // { pattern: /^[a-zA-Z0-9]_[a-zA-Z0-9]$/, message: "只能输入大小写字母、数字和下划线,且下划线不能在首尾", trigger: "blur" }
  ],
  // icon: [{ required: true, message: "不能为空", trigger: "change" }],
  state: [{ required: true, message: "不能为空", trigger: "change" }],
  sort: [
    { required: true, message: "不能为空", trigger: "blur" },
    // { pattern: /^[1-9]\d{8}$/, message: "只能输入数字", trigger: "blur" }
  ],
  permission: [
    { required: true, message: "类型为菜单和按钮时不能为空", trigger: "blur" },
  ],
})

// 提交表单校验
const formRef = ref<FormInstance>();
const basicDialog = ref();
async function handleSure() {
  formRef.value.validate(valid => {
    if (valid) {
      basicDialog.value.changeLoading(true);
      let params = {
        ...formInfo.value,
        pid: props.parentData.id ? props.parentData.id : 0
      }
      let funName = props.flag == 'menu_add' ? actiontreeAdd : actiontreeEdit
      funName(params).then((res: Response) => {
        ElMessage.success("操作成功")
        $emits("closeDialog", 1);
        basicDialog.value.changeLoading(false);
      }).catch(err => {
        basicDialog.value.changeLoading(false);
      })
    } else {
      // $emits("closeDialog", 0);
    }
  })
}



const title = ref("");
onMounted(async () => {
  if (props.flag == "menu_add") {
    title.value = '新增'
  } else if (props.flag == "menu_edit") {
    formInfo.value = await getActionTreeById(props.info.id)
    title.value = '修改'
  } else if (props.flag == "menu_look") {
    formInfo.value = await getActionTreeById(props.info.id)
    title.value = '查看'
  }
})

</script>

<style scoped lang="scss">
.logo_img {
  width: 25px;
  height: 25px;
}

.logo_list {
  width: 400px;
  height: 120px;
  overflow: auto;
  border: 1px solid #e4e4e4;
  box-shadow: 0 0 4px #999;
  border-radius: 5px;
  padding: 10px 17px;
  position: absolute;
  right: 0;
  top: 40px;
  z-index: 1;
  background: #fff;

  .logo_list_li {
    width: 28px;
    height: 28px;
    margin: 0 5px 5px;
    float: left;
    cursor: pointer;

    .el-image {
      width: 25px;
      height: 25px;

      img {
        width: 100%;
        height: 100%;
      }
    }

  }
}
</style>